<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning vue.js</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    

    <h1>Vue 入门</h1>
    <hr />

    <h3 v-bind:title="tips">{{ title }}</h3>

    <hr />

    <span v-if="nickname">Liux2yy</span>

    <hr />

    <ul>
        <li v-for="f in friends">
            {{ f.name }}
        </li>
    </ul>

    <hr />

    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>

    <hr />

    <p>{{ postvalue }}</p>
    <input v-model="postvalue" >

    <hr />
    <table class="table">
        <tbody>
            <tr><td>登录名</td><td>姓名</td></tr>
            <tr is="user-item"
                v-for="item in users"
                v-bind:user="item"
                v-bind:key="item.name"
            ></tr>
        </tbody>
    </table>

    <hr />
    <button v-bind:disabled="isButtonDisabled">Button</button>

    <hr />
    <a v-bind:[attrName]="attrValue"> attr bind </a>

</div>

<script type="text/javascript">

Vue.component('user-item', {
    props: [ 'user' ],
    template: "<tr><td>{{user.name}}</td><td>{{user.chname}}</td></tr>"
});

var vm = new Vue({

    el: "#app",
    data: {
        title:"hello, vue.js.",
        tips: new Date().toLocaleString(),
        nickname: true,
        friends:[
            { name:"GAO" },
            { name: "ZHANG"},
            { name: "WANG" }
        ],
        message: '123456789',
        postvalue: 'please input text...',
        users:[
            { name:"060312", chname: "刘翔" },
            { name:"060466", chname: "高峻" },
            { name:"060301", chname: "张华谊" }
        ],
        isButtonDisabled: true,
        attrname: "href",
        attrValue: "http://baidu.com"
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    },
    watch: {
        title: function(newValue, oldValue){
            console.log("title has changed: ", newValue, oldValue);
        }
    }
});

// vm.$watch('title', function (newValue, oldValue) {
//   console.log("title has changed: ", newValue, oldValue);
// })

</script>

</body>
</html>